<template>
    <div v-loading="loading">
        <div @click="$router.go(-1)" style="display: flex;align-items: center;cursor: pointer;margin-bottom: 5px;">
            <i class="el-icon-arrow-left" style="font-size: 20px;color: #409eff;"></i>
            <div style="color: #409eff;">返回</div>
        </div>
        <template>
            <el-descriptions class="margin-top" title="合集详情" :column="3" border>
                <el-descriptions-item>
                    <template slot="label">
                        作者
                    </template>
                    <UserInfo :user_id="datas.user_id" :userInfos="datas.user_info" v-if="datas.user_id"></UserInfo>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        合集ID
                    </template>
                    {{ datas.collection_id }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        合集名称
                    </template>
                    {{ datas.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        合集封面
                    </template>
                    <el-image class="border" style="width: 50px; height: 50px" :src="datas.thumbnail"
                        :preview-src-list="toArray(datas.thumbnail)">
                    </el-image>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        集数
                    </template>
                    {{ datas.episodes }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        演员列表
                    </template>
                    {{ datas.actor }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        是否完结
                    </template>
                    {{ datas.done == 0 ? "未完结" : "完结" }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        添加时间
                    </template>
                    {{ datas.created_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        标签
                    </template>
                    <el-tag type="success" style="margin-right: 10px;" v-for="(item, index) in datas.labels" :key="index">
                        {{ item }} </el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        作品分类
                    </template>
                    <div v-if="datas.categorys">
                        <el-tag type="success" style="margin-right: 10px;" v-for="(item, index) in datas.categorys"
                            :key="index">
                            {{ item }} </el-tag>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        合集说明
                    </template>
                    {{ datas.desc }}
                </el-descriptions-item>
            </el-descriptions>
        </template>

        <div v-if="videodetails.length > 0">
            <div style="font-weight: 600;font-size: 17px;margin-top: 20px;margin-bottom: 20px;">
                合集视频详情
            </div>
            <div style="cursor: pointer;">
                <el-card>
                    <div class="flexFS">
                        <div v-for="(item, index) in videodetails" :key="index" v-if="!item.deleted_at"
                            style="margin-bottom: 30px;margin-right: 30px;position: relative;" @click="playShowFun(item)">
                            <el-card :body-style="{ padding: '10px' }">
                                <el-image style="width: 150px; height: 150px" :src="item.first_frame"
                                    fit="cover"></el-image>
                                <div style="padding: 7px;text-align: center;">
                                    <span>{{ item.creation_name }}</span>
                                    <i class="el-icon-delete" style="color: red;"
                                        @click.stop="softDel(item.creation_id)"></i>
                                </div>
                            </el-card>

                            <el-button @click.stop="imagesFun(item.copyright)" size="small" type="success"
                                style="margin-left: 18px;margin-top: 10px;" :preview-src-list="srcList">查看版权</el-button>
                            <el-button @click.stop="updateWorks(item.creation_id)" size="small" type="primary"
                                style="margin-top: 10px;">修改</el-button>
                            <el-tag  v-if="item.status == 2"  type="danger" style="position: absolute;right: 10px;top: 20px"> 审核拒绝</el-tag>
                            <el-tag  v-if="item.status == 0"  type="warning" style="position: absolute;right: 10px;top: 20px"> 待审核</el-tag>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
        <!-- 展示图片大图 -->
        <el-dialog title="版权图片" :visible.sync="visible">
            <div class="">
                <img :src="item" :key="index" alt="" v-for="(item, index) in images" style="width: 100%;margin-right: 15px;">
            </div>
        </el-dialog>

        <!-- 播放弹窗 -->
        <div class="playPopup" v-if="playShow">
            <!-- <play :worksId.sync="worksId" ref="childRef" :isLive="true"></play> -->
            <div class="flexSB">
                <div>
                    <video class="videoBox" :src="videoUrl" controls></video>
                </div>
                <div class="infoBox" style="padding: 30px;">
                    <!-- <div style="font-weight: 600;font-size: 17px;margin-top: 20px;margin-bottom: 20px;text-align: center;">
                        视频详情
                    </div> -->
                    <el-card>
                        <el-descriptions class="margin-top" title="" :column="2" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    作品ID
                                </template>
                                {{ videoInfo.creation_id }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    评论数
                                </template>
                                {{ videoInfo.comment_count }}
                            </el-descriptions-item>


                            <el-descriptions-item>
                                <template slot="label">
                                    观看数
                                </template>
                                {{ videoInfo.viewed }}
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    作品名
                                </template>
                                {{ videoInfo.creation_name }}
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    转发数量
                                </template>
                                {{ videoInfo.forwards }}
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    集数
                                </template>
                                {{ videoInfo.episodes }}
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    收费金额
                                </template>
                                {{ videoInfo.fee }}
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    标签
                                </template>
                                <el-tag type="success" style="margin-right: 10px;" v-for="(item, index) in videoInfo.labels"
                                    :key="index"> {{
                                        item }} </el-tag>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    点赞数量
                                </template>
                                {{ videoInfo.like_count }}
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    m3u8媒体地址
                                </template>
                                {{ videoInfo.m3u8_media }}
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    订单总价格
                                </template>
                                {{ videoInfo.order_sum_price }}
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    添加时间
                                </template>
                                {{ videoInfo.created_at }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    修改时间
                                </template>
                                {{ videoInfo.updated_at }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    删除时间
                                </template>
                                {{ videoInfo.deleted_at }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>

                    <!-- 评论 -->
                    <!-- <div class="title"
                        style="font-style: 16px;font-weight: 700;margin: 30px 0;text-align: center;margin-bottom: 20px;">评论
                    </div> -->
                    <div v-if="videoInfo.creation_id" style="margin-bottom: 20px;margin-top: 20px;">
                        <comment :creation_id="videoInfo.creation_id"></comment>
                    </div>
                </div>
            </div>

            <i class="el-icon-circle-close closeIcon" @click="closeBtnFun"></i>

        </div>



        <div>

        </div>

    </div>
</template>
      
<script>
import comment from '@/components/comment/index'
export default {
    components: {
        comment
    },
    data() {
        return {
            srcList: [
                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ],
            visible: false,
            loading: false,
            videoUrl: "",
            tabdata: [],
            datas: {},
            videodetails: [],
            playShow: false,
            videoInfo: {},
            images: []
        }
    },
    mounted() {
        //this.getworksList()
        if (this.$route.query.id) {
            console.log("this.$route.query.id", this.$route.query.id)
            this.getWithdrawInfo(this.$route.query.id)
        }


    },
    methods: {
        softDel(id) {
            this.$request.del('/creation/delete_soft/' + id).then((res) => {
                this.$message.success('删除成功')
                this.getWithdrawInfo(this.$route.query.id)
            })
        },
        imagesFun(images) {
            this.visible = true
            this.images = images
            console.log(images)
        },
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },

        closeBtnFun() {
            this.playShow = false

        },

        playShowFun(item) {
            this.videoUrl = item.media_urls[0]
            this.videoInfo = item
            this.playShow = true
        },


        getWithdrawInfo(id) {
            let that = this
            this.$request.get('/creation-collection/detail/' + id).then((res) => {
                console.log('getWithdrawInfo', res)
                that.tabdata = []
                that.datas = res
                that.videodetails = res.creation
                that.tabdata.push(res)
            })
        },

        updateWorks(id) {
            this.$router.push({ path: "/upload-video?creation_id=" + id + '&type=update' });
        }
    },
}
</script>

      
<style lang="scss" scoped>
.closeBtn {
    // position: fixed;
    // top: 140px;
    // left: 70px;
    width: 50px;
    height: 50px;
    z-index: 9999;
    cursor: pointer;
    color: aliceblue;
}



.closeIcon {
    font-size: 50px;
    color: rgb(85, 85, 85);
    position: absolute;
    left: 230px;
    top: 30px;
}

.closeIcon:hover {
    color: #c5c5c5;
}

.playPopup {
    width: 100vw;
    height: 100vh;
    background-color: rgb(21, 39, 44);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    padding-left: 200px;

}

.videoBox {
    width: 1100px;
    height: 920px;
    background-color: black;

}


.el-button--text {
    margin-right: 20px !important;
}

.el-popover {
    width: 250px;
}

.flexFS {
    display: flex;

}

.infoBox {
    width: 520px;
    height: 927px;
    background-color: #ffffff;
    overflow: hidden;

}

.flexSB {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>